import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component { 
	constructor() { 
		super() 
    this.state = {
      words: '',
      list: [
        {id:1, words:'aaa'},
        {id:2, words:'bbb'}
      ]
    }
	}

  change = (e) =>{
    console.log('change', e)
    this.setState({
      words: e.target.value
    })

  }
  doAdd = (e)=>{
    // if(e.keyCode === 13) {
      console.log(e)
      const list= [...this.state.list]
      list.push({id:Date.now(), words: this.state.words})

      // // setTimeout( () => {
      //   // this.setState({words:''})
      //   // })
      this.setState({list,words:''})
      // this.setState({})
    // }
  }

  render() { 
    return (
      <div>
        <input type="text" value={this.state.words}  onChange={this.change} />
        <button onClick={this.doAdd}>添加</button>
        <ul>
          {this.state.list.map(it=>(<li key={it.id}>{it.words}</li>))}
        </ul>
      </div>
    )
  } 
} 
ReactDOM.render(
<div>
  <Hello />
</div>, document.getElementById('root')) 